<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input class="btn" type="button" value="播放"  onclick="Onclick()">
    <br>
    <input type="text" class="input" value="0" >
    <input type="button" class="add" value="+1" onclick="add()">
    <input type="button" class="min" value="-1" onclick="Min()">
    <br>
    <input type="checkbox" class="all" onclick="SelectAll()" >选中全部<br>
    <input type="checkbox" class="select" checked  >选项1<br>
    <input type="checkbox" class="select" >选项2<br>
    <input type="checkbox" class="select" >选项3<br>
    <input type="checkbox" class="select" >选项4<br>
    <input type="checkbox" class="select" >选项5<br>
    

    
</body>
<script>
    let btn = document.querySelector(".btn")
    function Onclick(){
        if(btn.value=="播放"){
            btn.value="暂停"
        }
        else{
            btn.value="播放"

        }

    }
    function add(){
        let input_element = document.querySelector(".input")
        input_element.value = parseInt(input_element.value)+1
    }

    function Min(){
        let input_element = document.querySelector(".input")
        input_element.value = parseInt(input_element.value)-1
    }
    let all = document.querySelector(".all")
    let select = document.querySelectorAll(".select")
    function SelectAll(){
        for(i = 0;i<select.length;i++){
            select[i].checked = all.checked
        }
    }
    for(i =0;i<select.length;i++){
        select[i].onclick = function(){
            all.checked = IsSElectAll(select)
        } 
    }
    function IsSElectAll(select){
        for(i =0;i<select.length;i++){
            if(select[i].checked==false){
                return false
            }
        }
        return true
    }

</script>
</html>